/* eslint-disable @typescript-eslint/no-unused-vars */
// 创建数据集
import React, { useState, useEffect } from 'react';
import {
	Button,
	Form,
	message,
	Modal,
	Space,
	Upload,
} from 'antd';
import { DownloadOutlined, PaperClipOutlined } from '@ant-design/icons';
import { baseUplaodURl } from 'src/services';

interface Iprops {
    modalVisible: boolean
    // data?: any
    // folderId: any
    // treeData: any
    // onCreate: any
    closeModal: any
}

// eslint-disable-next-line react/display-name
export const UploadDataSet = React.forwardRef( ( props: Iprops, formRef: any ) => {
	const [ options, setOptions ] = useState( [] );
	const [ fileList, setFileList ] = useState( [] );

	const [ form ] = Form.useForm();

	const handleCancle = () => {
		props.closeModal( false );
		form.resetFields();
	};


	const handleOk = () => {
		form.validateFields().then( value => {
			handleCancle();
		} ).catch( info => {
			message.warning( '请完善信息' );
		} );
	};

	useEffect( () => {
	} );
    
	//文件上传
	const handleFileChange = ( info ) => {
		// if ( info.file.status === 'uploading' ) {
		// 	console.log( '上传中。' );
		// }
		// if ( info.file.status === 'done' ) {
		// 	const { data } = info.file.response;
		// 	if ( data ) {
		// 		let columns = this.handleTableHeader( data.columns );
		// 		this.setState(
		// 			{ 'fileId': data.fileId,
		// 				'dataColumns': data.columns,
		// 				'dataSource': data.lines.map( ( item,index ) => ( { ...item,key: index } ) ),
		// 				columns },
		// 		);
		// 		console.log( '上传成功。' );
		// 		// console.log( this.state.fileList )
		// 	}else {
		// 		message.warning( info.file.response.message );
		// 	}
		// } else if ( info.file.status === 'error' ) {
		// 	console.log( '上传失败。' );
		// }

		// this.setState( { fileList: [ ...info.fileList ] } );
	};
    
	//上传前文件验证
	const beforeUpload = ( file,fileList ) => {
		//文件类型列表
		// const fileTypes = [
		// 	'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',//xlsx
		// 	'application/vnd.ms-excel',//xls
		// 	'.csv'
		// ];

		// //前端文件类型校验
		// const isPNG = fileTypes.indexOf( file.type ) === -1?false:true;
		// if ( !isPNG ) {
		// 	message.error( '文件格式不正确，请修改后重新上传！', 0.8 );
		// 	return Promise.reject();
		// }

		// //前端文件大小限制20m
		// const isLt20M = file.size / 1024 / 1024 < 20;
		// if ( !isLt20M ) {
		// 	message.error( `${file.name  }文件大小超出限制，请修改后重新上传`, 0.8 );
		// 	return Promise.reject();
		// }

		// if( this.state.fileList.length===0 ) {
		// 	this.setState( { fileList: [ ...fileList ] } );
		// }else{
		// 	message.error( '只能上传一个文件' );
		// 	return false;
		// }
		return true;

	};
    
	//移除文件操作
	const handleFileRemove = file => {
		// this.setState( { dataColumns: {},fileId: '',dataSource: [],columns: [],fileList: [] } );
	};


	return (
		<Modal okText={'确定'}
			visible={props.modalVisible}
			cancelText={'取消'}
			onCancel={handleCancle}
			onOk={handleOk}
			title={'数据替换'}>
			<div style={{ marginBottom: '10px' }}>
				<Button size="small" icon={<DownloadOutlined />}>请先下载模板</Button>
			</div>
			<div>
				<Upload
					action={`${baseUplaodURl}/bdhapi/uploadfilebi/data`}
					onChange={handleFileChange}
					beforeUpload={beforeUpload}
					onRemove={handleFileRemove}
					withCredentials
					// progress={{type:'line'}}
					fileList={fileList}
					accept=".xls, .xlsx">
					<Space>
						<Button type="primary" size="small" icon={<PaperClipOutlined />}>添加文件</Button>
						<span>(只能上传EXCEL文件，且不超过1MB)</span>
					</Space>
				</Upload>
			</div>
		</Modal>
	);
} );